<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style type="text/css">
        body{

            background-color: #EEEEEE;
        }

        #carousel-example-generic img{
            margin: 0 auto;
        }

        #carousel-example-generic{
            margin-top: 0px;
        }

    </style>
</head>
<body>
<!--导航条，在顶部固定:nav:html5新出的一个标记，具有比较强的语义性-->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <!--导航条的头部-->
    <div class="navbar-header">
        <a class="navbar-brand" >
            图片分享
        </a>
        <!-- 缩小之后的按钮 -->
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">

            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>

        </button>
    </div>


    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

        <ul class="nav navbar-nav navbar-right">

            <li th:if="${session.loginuser==null}"><a  id="login"><span class="glyphicon glyphicon-fire"></span><span id="login_info">登录</span></a></li>
            <li th:if="${session.loginuser!=null}"><a><span th:text="|${session.loginuser==null?'':session.loginuser.user_name}已经登录|"></span></a></li>
            <li th:if="${session.loginuser==null}"><a th:href="@{/front/registerUI}"><span class="glyphicon glyphicon-fire"></span>注册</a></li>
            <li th:if="${session.loginuser!=null}"><a th:href="@{/front/userCenterUI}"><span class="glyphicon glyphicon-list"></span>个人中心</a></li>


        </ul>
    </div>

</nav>



<!--bs中的js插件-----轮播图-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- 轮播图上的序号:三个小圆点 -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>

    <!-- 设置滑动的图片：加active样式的就是默认激活的那张 图片-->
    <div class="carousel-inner">
        <div class="item active">
            <img th:src="@{/upimage/23.png}" alt="..." style="width: 824px;height: 528px ">
        </div>



        <div class="item">
            <img th:src="@{/upimage/24.png}" alt="..." style="width: 824px;height: 528px ">
        </div>

        <div class="item ">
            <img th:src="@{/upimage/22.png}" alt="..." style="width: 824px;height: 528px ">
        </div>
    </div>

    <!-- 控制图片滑动的左右箭头 -->
    <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

<!--使用bootstrap栅格系统-->
<!-- 搜索框 -->
<div  style="background-color: orangered;margin-top: 10px;padding: 10px;" class="row">
    <!--bs组件----》输入框组-->
    <form method="post" th:action="@{/front/index}" id="seachForm" name="searhForm">
    <div class="col-lg-3 pull-right">
        <div class="input-group" style="width: 80%;margin: 0px auto;">
            <button type="submit" class="btn btn-success">查询</button>
        </div>
    </div>
    <div class="col-lg-3 pull-right">
        <select class="form-control" name="type_id">
            <option value="0">请选择类型</option>
            <option th:each="type:${types}" th:text="${type.type_name}" th:value="${type.type_id}" th:selected="${type.type_id==qb.type_id}"></option>
        </select>

    </div>
        <input type="hidden" name="currentPage" value="1"/>

            <div class="col-lg-3 pull-right">

        <select class="form-control">
            <option>默认排序</option>
            <option>最新发布</option>
            <option>播放次数最多</option>
        </select>
    </div>
    </form>
</div>
<div class="container-fluid" style="margin-top: 10px;">
    <div class="row" >
        <div  class="col-lg-3" style="background-color: white">
            <blockquote>
                <h2>
                    热门图片
                </h2>
            </blockquote>
            <div class="row">
                <div class="col-xs-5" >
                    <picture  style="width: 100%;height: 100%"><!--
                            /video_prj/upvideo/0cbe0b92-e660-4b82-97ba-3189ab98e3b8.mp4
                            -->
                        <source th:srcset="|@{/}upimage/001.jpg|" type="img/jpg"></source>
                    </picture>
                    <img th:src="@{/upimage/001.jpg}" alt="...">
                    <div style="position: relative;top:-20px">1</div>
                </div>
                <div class="col-xs-7" style="padding-right:0">
                    <h4>好看</h4>
                </div>

            </div>

        </div>
        <div  class="col-md-12">
            <!-- 栅格系统布局，一个商品 -->
            <div class="row"  id="images" >
                <!--一个视频start-->
                <div class="col-sm-6 col-md-4 col-xs-12 col-lg-3" th:each="image:${pb.list}">
                    <!--bs中组件-----》缩略图-->
                    <div class="thumbnail">
                        <video  style="width: 100%;height: 100%"><!--
                            /video_prj/upvideo/0cbe0b92-e660-4b82-97ba-3189ab98e3b8.mp4
                            -->
                            <source th:src="|@{/}${image.image_url}|" type="img/jpg"></source>
                        </video>
                        <img th:src="|@{/}${image.image_url}|" alt="..." style="width: 255px;height: 200px">
                        <div class="caption">
                            <h4 th:text="${image.image_name}"></h4>
                            <p>
                                <a class="btn btn-danger btn-sm" th:href="@{/front/imagedetailui(image_id=${image.image_id})}">查看</a>
                            </p>
                        </div>
                    </div>
                </div>
                <!--一个视频end-->
            </div>

            <ul class="pagination pull-right">
                <li><a th:href="|javascript:goPage(${pb.pageNum-1})|">&laquo;</a></li>
<!--                &lt;!&ndash;1 2 3 4 5 应该循环查询pages:总页码-->
<!--                 url传值： /mananer/listui?currentPage=1-->
<!--                &ndash;&gt;-->

                <li  th:class="${pb.pageNum==i?'active':''}" th:each="i:${#numbers.sequence(1,pb.pages)}"><a th:href="|javascript:goPage(${i})|" th:text="${i}"></a></li>

                <li><a th:href="|javascript:goPage(${pb.pageNum+1})|">&raquo;</a></li>
            </ul>
        </div>


    </div>
</div>

<!--登录的模态框   bs中js插件----》模态框-->
<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">登录</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" th:action="@{/front/login}" method="post" id="login_form" name="login_form">
                    <div class="form-group">
                        <label class="col-md-4 col-sm-4 control-label">用户名：</label>
                        <div class="col-md-6 ">
                            <input type="text" class="form-control"  required="required" name="user_name" />

                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-4 col-sm-4 control-label">密码：</label>
                        <div class="col-md-6 ">
                            <input type="password" class="form-control"  required="required" name="user_pwd">

                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="login_btn">登录</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!--模态框结束-->

<!--<script type="text/javascript" th:src="@{/asserts/js/jquery-1.12.3.min.js}"></script>-->
<!--<script type="text/javascript" th:src="@{/asserts/js/bootstrap.min.js}"></script>-->
<script type="text/javascript">

    //打开登录模态框
    $("#login").click(function(){
        if($("#login_info").text()=='登录'){
            //展示模态框的意思
            $('#myModal').modal();
        }

        return false;//组织超连接的默认行为
    });


    //处理登录
    $("#login_btn").click(function(){

        $("#login_form")[0].submit();
    });

    //@{/manager/listui(currentPage=${i})}
    //index:表示的是页码
    function goPage(index){

        //将当前页的信息保存到隐藏域中
        searhForm.currentPage.value=index;
        //可以以js的方式进行表单提交
        searhForm.submit();
    }

</script>


</body>
</html>